<template>
  <!-- 已付款 -->
  <view class="container" v-if="Object.keys(pageObj.contacts).length > 0">
    <!-- 收货信息 -->
    <view class="card">
      <view class="flex align-center">
        <text class="iconfont icon-location fs-40 color-primary"></text>
        <view class="ml-20">
          <view class="flex align-center">
            <text class="fs-32">{{ pageObj.contacts.realname }}</text>
            <text class="ml-30 fs-28 color-grey">{{ pageObj.contacts.telephone }}</text>
          </view>
          <!-- <text class="fs-28 color-dark mt-10">{{pageObj.contacts.IDNumber}}</text> -->
        </view>
      </view>
    </view>

    <!-- 商品信息 -->
    <view class="order-item">
      <!-- 订单标题和交易状态 -->
      <view class="order-header" @click.stop="goPage('/page_home/planDetail?id=' + pageObj.goods.id)">
        <view class="order-title">
          <i class="iconfont icon-ds-shop" />&nbsp;
          <view class="order-title-text">{{ pageObj.goods.name }}</view>
          <!-- 右箭头图标 -->
          <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
        </view>
        <text class="order-status" :style="{ color: statusFun(pageObj.status).color }">{{ statusFun(pageObj.status).text
        }}</text>
      </view>

      <view class="order-box" v-for="item, idx in pageObj.goods.selectedSpecificationGroups" :key="idx">

        <!-- 订单图片 -->
        <!-- <view class="order-image">
          <image :src="host + pageObj.goods.icon" mode="aspectFill" class="image"></image>
        </view> -->
        <view class="order-box-l">
          <!-- 订单详情规格 -->
          <view class="order-details" v-if="item.specificationItemGroup">
            <text class="detail-text-title" v-for="row, ix in item.specificationItemGroup">{{
              row.name + '+' + row.itemName }}；</text>
          </view>
          <view class="order-details">
            <view class="detail-text-desc">{{ pageObj.goods.region }}</view>
          </view>
          <!-- 条件 -->
          <!-- <view class="order-details">
    				<view class="detail-text">{{item.specificationCondition}}</view>
    			</view> -->
          <!-- 7天无理由 -->
          <view class="order-details order-more" v-if="pageObj.goods.guarantees">
            <text class="detail-text-smallTitle" v-for="row, ix in pageObj.goods.guarantees">{{ row.name }}：{{
              row.content }}</text>
          </view>
        </view>
        <!-- 价格、数量、运费 -->
        <view class="order-info">
          <view class="price"><text class="price-icon">￥</text> {{ item.currentUnitPrice / 100 }}
          </view>
          <view class="quantity">x {{ item.amount }}</view>
          <!-- <text class="shipping">（含运费: {{ order.shipping }}）</text> -->
        </view>
      </view>
    </view>
    <!-- 相关信息 -->
    <view class="" v-if="pageObj.goods.parameters && pageObj.goods.parameters.length > 0">
      <view class="like">
        <view class="like-tittle">
          相关信息
          <!-- <view class="like-tittle-text" >
    				查看全部
    			</view> -->
        </view>
        <view class="like-desc">
          <view class="like-desc-box" v-for="item, index in pageObj.goods.parameters" :key="index">
            <view class="like-desc-box-t">
              {{ item.name }}
            </view>
            <view class="like-desc-box-b">
              {{ item.content }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 商品服务 -->
    <view class="" v-if="pageObj.goods.guarantees && pageObj.goods.guarantees.length > 0">
      <view class="like">
        <view class="like-tittle">
          商品服务
          <!-- <view class="like-tittle-text" >
    				查看全部
    			</view> -->
        </view>
        <view class="like-desc">
          <view class="like-desc-box" v-for="item, index in pageObj.goods.guarantees" :key="index">
            <view class="like-desc-box-t">
              {{ item.name }}
            </view>
            <view class="like-desc-box-b">
              {{ item.content }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 订单信息 -->
    <view class="card">
      <view class="card-box">
        <view class="card-box-l">
          订单编号
        </view>
        <view class="card-box-r">
          {{ pageObj.tradeNo }}
          <i style="margin-left: 5rpx;display: inline-block;" @click="$publicFun.copy({ title: pageObj.tradeNo })"
            class="iconfont icon-muban" />
        </view>
      </view>
      <view class="card-box">
        <view class="card-box-l">
          创建时间
        </view>
        <view class="card-box-r">
          {{ $publicFun.GetTime(pageObj.createTime) }}
        </view>
      </view>
      <view class="card-box">
        <view class="card-box-l">
          支付方式
        </view>
        <view class="card-box-r">
          微信支付
        </view>
      </view>
      <view class="card-box" v-if="pageObj.description">
        <view class="card-box-l">
          下单备注
        </view>
        <view class="card-box-r">
          {{ pageObj.description }}
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="footer">

      <view class="footer1-box-r">
        <view class="">
          待支付：
        </view>
        <view class="product-price">￥<text class="plan-price-text">{{ pageObj.price / 100 }} </text>元
        </view>

      </view>
      <view class="footer-btn">
        <!-- <button class="btn secondary  ">查看详情</button> -->
        <!-- <button class="btn secondary">联系客服</button> -->
        <button class="btn primary btn-class">立即付款</button>
      </view>

    </view>

  </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'paySuccess',
  components: {},
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      pageObj: {
        contacts: {},
      },
      id: '',
    }
  },
  watch: {},
  computed: {
    //login_status 0 未登录 、1临时微信登录 2已登录
    ...mapGetters(['login_status']),
  },
  onLoad(option) {
    this.id = option.id
    this.init(option.id)
  },
  methods: {
    async init() {
      let data = await this.$apiFun.getApi(this.$api.orderDetailApi, {
        payOrderId: this.id,
      })
      this.pageObj = data
    },

    goPage(url) {
      uni.navigateTo({
        url: url,
      })
    },
    statusFun(refundStatus, status) {
      /*
      * status 订单状态(0:待付款 1:待使用（已付款）)
      * refundStatus 订单状态(0:待退款 1:已取消（已退款）  -1:已驳回 )
      */
      let text = ''
      let color = '#ff5000'
      if (refundStatus == 1) {
        text = '已取消'
      } else {
        if (status == 0) {
          text = '待付款'
        } else if (status == 1) {
          text = '待使用'
        } else if (status == -1) {
          text = '交易失败'
        }
      }
      return {
        text,
        color,
      }
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
.container {
  padding: 0 15rpx;
  box-sizing: border-box;
  background-color: #000000;
  min-height: 100vh;
  padding-bottom: 200rpx;
}

.arrow-icon {
  width: 10rpx;
  height: 10rpx;
  margin-left: 10rpx;
}

.order-item {
  // background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 20rpx;
  padding: 40rpx 30rpx;
  // border: 1rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.order-title {
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;

  .order-title-text {
    max-width: 400rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .iconfont {
    font-size: 40rpx;
    margin-right: 10rpx;
  }
}

.order-status {
  font-size: 28rpx;
}

.order-box {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  margin-bottom: 15rpx;
  // padding: 0 30rpx;
  // box-sizing: border-box;
  // background-color: rgba(255, 255, 255, 0.1);
}

.order-more {
  height: 80rpx;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  white-space: normal;
  -webkit-box-orient: vertical;
}

.order-details {
  margin-bottom: 5rpx;

  .product-title {
    width: 100%;
    display: block;
    font-size: 26rpx;
    // width: 300rpx;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 10rpx;
  }
}

.detail-text-l {}

.detail-text-smallTitle {
  font-size: 20rpx;
  line-height: 35rpx;
  margin-right: 10rpx;
}

.detail-text-title {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}

.detail-text-desc {
  font-size: 20rpx;
}

.detail-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
}

.order-info {
  text-align: right;
}

.price {
  font-size: 26rpx;
  font-weight: bold;

  .price-icon {
    font-size: 20rpx;
  }
}

.quantity {
  color: #979797;
}

.shipping {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 1);
}

.order-image {
  display: flex;
  justify-content: flex-end;
  margin-right: 15rpx;
  width: 170rpx;
  height: 170rpx;

  .image {
    width: 170rpx;
    height: 170rpx;
    border-radius: 10rpx;
  }
}

.order-box-l {
  flex: 1;
}

.card {
  margin: 20rpx auto;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-box {
  // padding: 0 30rpx;
  // box-sizing: border-box;
  // background: rgba(255, 255, 255, 0.1);
  min-height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;

  .card-box-l {
    font-size: 26rpx;
    white-space: nowrap;
    min-width: 150rpx;
  }

  .card-box-r {
    color: rgba(255, 255, 255, 0.7);
    font-size: 25rpx;
  }
}

.goods-item {
  padding: 20rpx 0;

  &+.goods-item {
    // border-top: 2rpx solid #eee;
  }

  .goods-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
  }

  .goods-info {
    flex: 1;
    margin-left: 24rpx;
  }

  .goods-title {
    font-size: 28rpx;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

.price {
  font-size: 26rpx;
  font-weight: bold;
}

.price-lg {
  color: #e64340;
  font-size: 40rpx;
  font-weight: bold;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 1);
  padding: 20rpx;

  .footer1-box-r {
    color: rgba(255, 255, 255, 1);
    margin: 0 25rpx 30rpx 0;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;

    .product-price {
      font-size: 20rpx;
      color: #e64340;
      font-weight: bold;

      .plan-price-text {
        font-size: 40rpx;
        margin: 0 5rpx;
      }
    }
  }

  .footer-btn {
    display: flex;
    justify-content: flex-end;

    .btn {
      height: 72rpx;
      line-height: 72rpx;
      padding: 0 40rpx;
      border-radius: 36rpx;
      font-size: 28rpx;
      margin: 0 25rpx 0 0;

      &:after {
        border: 0;
      }

      &.secondary {
        background: #f5f5f5;
        color: #666;
      }

      &.primary {
        background: #e64340;
        color: white;
      }
    }
  }
}

// 置顶弹框
.like {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;

  .like-tittle {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 1);
    justify-content: space-between;
    display: flex;
    align-items: center;

    .like-tittle-text {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 1);
    }

    .like-tittle-img {
      width: 14rpx;
      height: 14rpx;
    }

    .iconfont {
      font-size: 40rpx;
    }
  }

  .like-desc {
    font-size: 25rpx;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;

    .like-desc-box {
      display: flex;
      align-items: flex-start;
      padding: 40rpx 0;
      box-sizing: border-box;
      border-bottom: 1rpx solid #e6e6e6;

      .like-desc-box-t {
        width: 180rpx;
        color: rgba(255, 255, 255, 1);
      }

      .like-desc-box-b {
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}

// 辅助样式
.mt-10 {
  margin-top: 10rpx;
}

.ml-20 {
  margin-left: 20rpx;
}

.ml-30 {
  margin-left: 30rpx;
}

.fs-28 {
  font-size: 28rpx;
}

.fs-32 {
  font-size: 32rpx;
}

.fs-40 {
  font-size: 40rpx;
}

.color-primary {
  color: #07c160;
}

.color-grey {
  color: #999;
}

.color-dark {
  color: rgba(255, 255, 255, 1);
}

.bg-primary {
  background: #07c160;
}

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}
</style>